@import "tailwindcss";

@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

body {
  @apply m-0;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family:
    source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

:root {
  --background: oklch(100% 0 0); /* 0 0% 100% */
  --foreground: oklch(6.37% 0.17 272.53); /* 222.2 84% 4.9% */
  --card: oklch(100% 0 0); /* 0 0% 100% */
  --card-foreground: oklch(6.37% 0.17 272.53); /* 222.2 84% 4.9% */
  --popover: oklch(100% 0 0); /* 0 0% 100% */
  --popover-foreground: oklch(6.37% 0.17 272.53); /* 222.2 84% 4.9% */
  --primary: oklch(62.72% 0.23 262.39); /* 221.2 83.2% 53.3% */
  --primary-foreground: oklch(97.2% 0.07 241.36); /* 210 40% 98% */
  --secondary: oklch(95.14% 0.07 240); /* 210 40% 96.1% */
  --secondary-foreground: oklch(13.47% 0.07 260.11); /* 222.2 47.4% 11.2% */
  --muted: oklch(95.14% 0.07 240); /* 210 40% 96.1% */
  --muted-foreground: oklch(47.78% 0.06 241.9); /* 215.4 16.3% 46.9% */
  --accent: oklch(95.14% 0.07 240); /* 210 40% 96.1% */
  --accent-foreground: oklch(13.47% 0.07 260.11); /* 222.2 47.4% 11.2% */
  --destructive: oklch(48.44% 0.27 354.71); /* 0 84.2% 60.2% */
  --destructive-foreground: oklch(97.2% 0.07 241.36); /* 210 40% 98% */
  --border: oklch(90.82% 0.05 234.47); /* 214.3 31.8% 91.4% */
  --input: oklch(90.82% 0.05 234.47); /* 214.3 31.8% 91.4% */
  --ring: oklch(62.72% 0.23 262.39); /* 221.2 83.2% 53.3% */
  --chart-1: 221.2 83.2% 53.3%;
  --chart-2: 12 76% 61%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;
  /* --chart-1: oklch(67.48% 0.22 106.04);     /\* 12 76% 61% *\/ */
  /* --chart-2: oklch(46.09% 0.17 154.89);     /\* 173 58% 39% *\/ */
  /* --chart-3: oklch(25.81% 0.11 200.19);     /\* 197 37% 24% *\/ */
  /* --chart-4: oklch(71.98% 0.25 41.74);    /\* 43 74% 66% *\/ */
  /* --chart-5: oklch(72.51% 0.29 28.41);     /\* 27 87% 67% *\/ */
  --radius: 0.5rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.141 0.005 285.823);
  --sidebar-primary: oklch(0.21 0.006 285.885);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.967 0.001 286.375);
  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
  --sidebar-border: oklch(0.92 0.004 286.32);
  --sidebar-ring: oklch(0.871 0.006 286.286);
}

.dark {
  --background: oklch(6.37% 0.17 272.53); /* 222.2 84% 4.9% */
  --foreground: oklch(97.2% 0.07 241.36); /* 210 40% 98% */
  --card: oklch(6.37% 0.17 272.53); /* 222.2 84% 4.9% */
  --card-foreground: oklch(97.2% 0.07 241.36); /* 210 40% 98% */
  --popover: oklch(6.37% 0.17 272.53); /* 222.2 84% 4.9% */
  --popover-foreground: oklch(97.2% 0.07 241.36); /* 210 40% 98% */
  --primary: oklch(69.36% 0.3 264.04); /* 217.2 91.2% 59.8% */
  --primary-foreground: oklch(13.47% 0.07 260.11); /* 222.2 47.4% 11.2% */
  --secondary: oklch(19.94% 0.09 240.6); /* 217.2 32.6% 17.5% */
  --secondary-foreground: oklch(97.2% 0.07 241.36); /* 210 40% 98% */
  --muted: oklch(19.94% 0.09 240.6); /* 217.2 32.6% 17.5% */
  --muted-foreground: oklch(63.86% 0.07 237.65); /* 215 20.2% 65.1% */
  --accent: oklch(19.94% 0.09 240.6); /* 217.2 32.6% 17.5% */
  --accent-foreground: oklch(97.2% 0.07 241.36); /* 210 40% 98% */
  --destructive: oklch(28.79% 0.23 356.52); /* 0 62.8% 30.6% */
  --destructive-foreground: oklch(97.2% 0.07 241.36); /* 210 40% 98% */
  --border: oklch(1 0 0 / 40%);
  --input: oklch(1 0 0 / 40%);
  --ring: oklch(56.2% 0.26 262.38); /* 224.3 76.3% 48% */

  --chart-1: 221.2 83.2% 53.3%;
  --chart-2: 340 75% 55%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 160 60% 45%;
  /* --chart-1: oklch(53.41% 0.22 239.79);       /\* 220 70% 50% *\/ */
  /* --chart-2: oklch(47.62% 0.17 147.16);       /\* 160 60% 45% *\/ */
  /* --chart-3: oklch(57.77% 0.32 15.98);        /\* 30 80% 55% *\/ */
  /* --chart-4: oklch(62.48% 0.21 281.69);       /\* 280 65% 60% *\/ */
  /* --chart-5: oklch(57.35% 0.34 337.32);       /\* 340 75% 55% *\/ */
  --sidebar: oklch(0.21 0.006 285.885);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.274 0.006 286.033);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.274 0.006 286.033);
  --sidebar-ring: oklch(0.442 0.017 285.786);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }

  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }

  label:has(input[required]) div:first-of-type {
    @apply after:ml-0.5 after:text-lg after:text-red-500 after:content-['*'];
  }

  div.required {
    @apply after:ml-0.5 after:text-lg after:text-red-500 after:content-['*'];
  }

  h1 {
    @apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
  }

  h2 {
    @apply mt-10 scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0;
  }

  h3 {
    @apply mt-8 scroll-m-20 text-2xl font-semibold tracking-tight;
  }

  h4 {
    @apply text-2xl font-medium;
  }
}
